<template>
    <div class="webTip">
        <drawer title="web版本列表" :display.sync="isShow" width="60%" :isComponentUse="true" @visibleChange="visibleOrderChange">
            <div style="padding:0 10px">
                <div class="search">
                    <div class="search_input">
                        <el-input v-model="content" placeholder="更新内容" style="margin-right:15px;width:180px" clearable></el-input>
                        <el-button type="primary" size="mini" @click="getSonDataList('check')">查询</el-button>
                    </div>
                    <div class="search_button">
                        <el-tooltip class="item" content="web版本发布" placement="top">
                            <el-button size="mini" class="marginC" @click="addTipMessage">
                                <i class="iconfont icon-WEB"></i>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content='web版本修改' placement="top">
                            <el-button size="mini" @click="editTipMessage">
                                <i class="el-icon-edit" style="font-size: 16px"></i>
                            </el-button>
                        </el-tooltip>
                    </div>
                </div>
                <BaseTable :data="tableData" :columns="tableColumns" :tableHeight="tableHeight"
                    @details="detailHandleClick" :pagination="false"></BaseTable>
                <div class="page">
                    <el-pagination background @size-change="handleSonSizeChange" :total="children.totalNum" :current-page="children.currentPage" :page-size="children.pagesize" @current-change="handleSonCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                </div>
            </div>
        </drawer>
        <drawer title="web端更新tips" :display.sync="isDetailShow" width="35%" class="showDetail">
            <el-form label-position="right" class="elFormWeb">
                <el-form-item :style="index%2 == 0 ? 'background: #fff':''"
                    :label="(index+1)+'.'" label-width="50px" v-for="(item,index) in tipList" :key="index">
                    <!-- <div class="updataForm">
                        <el-input type="textarea" size='mini' :value="item"></el-input>
                    </div> -->
                    <div style="padding-left: 10px;word-wrap: break-word">{{item}}</div>
                </el-form-item>
            </el-form>
        </drawer>
        <!-- <drawer title="已阅人员" :display.sync="isReadlShow" width="40%">
           <div class="readP">
               {{readStr}}
           </div>
        </drawer> -->
        <!-- web版本发布 -->
        <el-drawer title="web端版本发布" :visible.sync="addTip" direction="rtl" size="30%" :before-close="handleClose"  >
            <el-form ref="addTipForm" :model="addTipForm" style="padding:20px" label-position="right" class="elFormWebtwo">
                <el-form-item label="版本号" label-width="100px">
                    <el-input size='mini' v-model="addTipForm.versionCode"></el-input>
                </el-form-item>
                <el-form-item label="版本名称" label-width="100px">
                    <el-input size='mini' v-model="addTipForm.versionName"></el-input>
                </el-form-item>
                <el-form-item :rules="{ required: true, message: 'tip不能为空' }" :label="'tip'+(index+1)" label-width="100px" v-for="(item,index) in addTipForm.tipList" :key="index" :prop="'tipList.' + index + '.tip'">
                    <div class="updataForm">
                        <el-input type="textarea" size='mini' autosize v-model="item.tip"></el-input>
                        <div class="latClose">
                            <i class="iconfont icon-1-08 latCloseHover" @click="delForm(index)" style="font-size: 20px;color:#FA5151"></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="备注" label-width="100px">
                    <el-input type="textarea" size='mini' v-model="addTipForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="ABtn">
                        <el-button type="primary" @click="addTipFun" size="mini">新增更新提示</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="addTipSave()">保 存</el-button>
            </div>
        </el-drawer>
        <!-- web版本修改 -->
        <el-drawer title="web端版本修改" :visible.sync="editTip" direction="rtl" size="30%" :before-close="handleClose"  >
            <el-form ref="editTipForm" :model="editTipForm" style="padding:20px" label-position="right" class="elFormWebtwo">
                <el-form-item label="版本号" label-width="100px">
                    <el-input size='mini' v-model="editTipForm.versionCode"></el-input>
                </el-form-item>
                <el-form-item label="版本名称" label-width="100px">
                    <el-input size='mini' v-model="editTipForm.versionName"></el-input>
                </el-form-item>
                <el-form-item :rules="{ required: true, message: 'tip不能为空' }" :label="'tip'+(index+1)" label-width="100px" v-for="(item,index) in editTipForm.tipList" :key="index" :prop="'tipList.' + index + '.tip'">
                    <div class="updataForm">
                        <el-input type="textarea" size='mini' autosize v-model="item.tip"></el-input>
                        <div class="latClose">
                            <i class="iconfont icon-1-08 latCloseHover" @click="delEditForm(index)" style="font-size: 20px;color:#FA5151"></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="备注" label-width="100px">
                    <el-input type="textarea" size='mini' v-model="editTipForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="ABtn">
                        <el-button type="primary" @click="editTipFun" size="mini">新增更新提示</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="editTipSave()">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import drawer from '@/components/BaseTable/drawer';
import BaseTable from '@/components/BaseTable';
import { isObjectValueEqual } from '@/libs/date'
export default {
    name: 'importfolder',
    components: {
        drawer,
        BaseTable
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
    },
    computed: {
        tableHeight: function () {
            return this.$store.state.tableHeight
        }
    },
    watch: {
        isShow(newData) {
            console.log(newData);
            newData ? this.getSonDataList() : ''
        },
        addTipForm: {
            handler(newVal, oldVal) {
                this.flagHint = isObjectValueEqual(newVal, oldVal)
            },
            deep: true
        },
        editTipForm: {
            handler(newVal, oldVal) {
                this.flagHint = isObjectValueEqual(newVal, oldVal)
            },
            deep: true
        }
    },
    data() {
        return {
            isReadlShow:false,//展示已阅人员
            readStr:'',//已阅人员,用逗号隔开
            isDetailShow: false,//是否显示详细信息
            tableData: [],//表格数据
            tableColumns: [ //表格colums
                {
                    prop: 'createName',
                    label: '发布人'
                },
                {
                    prop: 'versionCode',
                    label: '版本号'
                },
                {
                    prop: 'versionName',
                    label: '版本名称'
                },
                {
                    prop: 'createTime',
                    label: '发布时间',
                    width: 160
                },
                {
                    prop: 'remark',
                    label: '备注'
                },
                {
                    label: '操作',
                    width:160,
                    align:'center',
                    render: (h, ctx) => {
                        return h('div', [
                            h('el-button', {
                                props: {
                                    size: 'mini',
                                },
                                style: {

                                },
                                domProps: {
                                    // 添加标签,使用自己引入的iconfont图标
                                    innerHTML: `<span  style='padding-left:5px;color:#FA5151;'>详情</span>`
                                },
                                on: {
                                    click: () => {
                                        click: this.detail(ctx.row)
                                    }
                                }
                            }),
                            /* h('el-button', {
                                props: {
                                    size: 'mini',
                                },
                                style: {

                                },
                                domProps: {
                                    // 添加标签,使用自己引入的iconfont图标
                                    innerHTML: `<span  style='padding-left:5px;'>已阅人员</span>`
                                },
                                on: {
                                    click: () => {
                                        click: this.toReadPeople(ctx.row)
                                    }
                                }
                            }) */
                        ])
                    }
                },
            ],
            children: { //分页
                totalNum: 0,
                currentPage: 1,
                pagesize: 10
            },
            content: '', //查询内容
            tipList: [],//更新列表
            //新增更新信息的表单
            addTipForm: {
                versionCode: '',//版本号
                versionName: '',//版本名
                remark: '',//备注
                tipList: [{
                    tip: ''
                }]
            },
            //web版本修改的表单
            editTipForm: {
                versionCode: '',//版本号
                versionName: '',//版本名
                remark: '',//备注
                tipList: [{
                    tip: ''
                }]
            },
            addTip: false,
            editTip: false,
            clickRow: '',// 选中行数据
        }
    },
    mounted() {
        //获取列表数据
        this.getSonDataList()
    },
    methods: {
        //获取当前行数据
        detailHandleClick(row) {
            this.clickRow = row
            // console.log(this.clickRow)
        },
        //已读人员
        toReadPeople(row){
              this.$http.get(`/${this.$ServiceName}/api/external/readlog/${this.$version}/listcreatename`, {
                params: {
                    versionId: row.id
                }
            }).then(res => {
                if (res.data.success) {
                    console.log(res);
                    this.isReadlShow = true
                    this.readStr = res.data.data.length != 0? res.data.data.join(','):'无'
                }
            })
        },
        //关闭模态框
        visibleOrderChange(val) {
            this.$emit('visibleChange', val)
        },
        //页数变化
        handleSonSizeChange(val) {
            this.children.pagesize = val
            this.getSonDataList()
        },
        //页码变化
        handleSonCurrentChange(val) {
            this.children.currentPage = val
            this.getSonDataList()
        },
        //获取列表数据
        getSonDataList() {
            this.$http.get(`/${this.$ServiceName}/api/external/mtips/${this.$version}/queryall`, {
                params: {
                    startpage: this.children.currentPage,
                    pagesize: this.children.pagesize,
                    content: this.content
                }
            }).then(res => {
                if (res.data.success) {
                    this.children.totalNum = res.data.data.totalNum
                    this.tableData = res.data.data.pages
                    this.clickRow = ''
                }
            })
        },
        //获取详情
        detail(row) {
            console.log(row);
            this.getWebTipByID(row.id)
        },
        //获取列表单个详情
        getWebTipByID(id) {
            this.$http.get(`/${this.$ServiceName}/api/external/mtips/${this.$version}/querybyid`, {
                params: {
                    id: id
                }
            }).then(res => {
                if (res.data.success) {
                    this.isDetailShow = true
                    this.tipList = res.data.data.content ? res.data.data.content.split('///') : []
                    if (this.tipList.length > 1) {
                        this.tipList = this.tipList.slice(0, -1)
                    }

                }
            })
        },
        // 关闭抽屉操作
        handleClose(done) {
            if (this.flagHint) {
                this.$confirm('您已修改了数据，确定是否关闭？')
                    .then(_ => {
                        done()
                        this.addTip = false
                        this.editTip = false
                        this.addTipForm = {
                            versionCode: '',//版本号
                            versionName: '',//版本名
                            remark: '',//备注
                            tipList: [{
                                tip: ''
                            }]
                        }
                        this.editTipForm = {
                            versionCode: '',//版本号
                            versionName: '',//版本名
                            remark: '',//备注
                            tipList: [{
                                tip: ''
                            }]
                        }
                    })
                    .catch(_ => { })
            } else {
                done()
                this.addTip = false
                this.editTip = false
                this.addTipForm = {
                    versionCode: '',//版本号
                    versionName: '',//版本名
                    remark: '',//备注
                    tipList: [
                        {
                            tip: ''
                        },
                    ]
                }
                this.editTipForm = {
                    versionCode: '',//版本号
                    versionName: '',//版本名
                    remark: '',//备注
                    tipList: [
                        {
                            tip: ''
                        },
                    ]
                }
            }
        },
        addTipSave() {
            this.$refs['addTipForm'].validate((valid) => {
                if (valid) {
                    let remark = ''//要上传的更新
                    if (this.addTipForm.tipList.length != 0) {
                        this.addTipForm.tipList.map(item => {
                            item.tip ? remark = remark + item.tip + '///' : ''
                        })
                    }
                    console.log(remark);
                    this.$http.post(`/${this.$ServiceName}/api/external/mtips/${this.$version}/insert`, {
                        content: remark,
                        versionCode: this.addTipForm.versionCode,
                        versionName: this.addTipForm.versionName,
                        remark: this.addTipForm.remark
                    })
                    .then(res => {
                        if (res.data.success) {
                            this.addTip = false
                            this.getSonDataList()
                            this.$message.success(res.data.msg)
                        }
                    }).catch(err => {

                    })
                }
            })
        },
        editTipSave() {
            this.$refs['editTipForm'].validate((valid) => {
                if (valid) {
                    let remark = ''//要上传的更新
                    if (this.editTipForm.tipList.length != 0) {
                        this.editTipForm.tipList.map(item => {
                            item.tip ? remark = remark + item.tip + '///' : ''
                        })
                    }
                    console.log(remark);
                    this.$http.put(`/${this.$ServiceName}/api/external/mtips/${this.$version}/update`, {
                        id: this.clickRow.id,
                        content: remark,
                        versionCode: this.editTipForm.versionCode,
                        versionName: this.editTipForm.versionName,
                        remark: this.editTipForm.remark
                    })
                    .then(res => {
                        if (res.data.success) {
                            this.editTip = false
                            this.getSonDataList()
                            this.$message.success(res.data.msg)
                        }
                    }).catch(err => {

                    })
                }
            })
        },
        //删除提示字段
        delForm(index) {
            this.addTipForm.tipList.splice(index, 1)
        },
        //web版本修改删除提示字段
        delEditForm(index) {
            this.editTipForm.tipList.splice(index, 1)
        },
        //新增更新提示字段
        addTipFun() {
            this.addTipForm.tipList.push(
                {
                    tip: ''
                }
            )
        },
        //web版本修改新增更新提示字段
        editTipFun() {
            this.editTipForm.tipList.push(
                {
                    tip: ''
                }
            )
        },
        //web版本发布
        addTipMessage() {
            this.addTip = true
        },
        //web版本修改
        editTipMessage() {
            if (this.clickRow != '') {
                let templateData = this.clickRow.content.split("///")
                if (templateData.length > 1) {
                    templateData = templateData.slice(0, -1)
                }
                let arr = []
                for(let i = 0; i < templateData.length; i++){
                    arr[i]={"tip":templateData[i]}
                }
                this.editTip = true
                this.editTipForm = {
                    versionCode: this.clickRow.versionCode,
                    versionName: this.clickRow.versionName,
                    remark: this.clickRow.remark,
                    nsrsbh: this.clickRow.nsrsbh,
                    address: this.clickRow.address,
                    tipList: arr,
                }
                console.log(this.editTipForm)
            } else {
                this.clickRow = ''
                this.$message.error('请先选择一行数据')
            }
        },
    },
}
</script>

<style lang="less" scoped>
.updataForm {
    position: relative;
    .latClose {
        top: -8px;
        right: -2px;
        position: absolute;
        cursor: pointer;
    }
    .latClose:hover {
        transform: scale(1.2);
        transition: all 0.1s linear;
    }
}
.search {
    background-color: #fff;
    color: #303133;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    .marginC {
        margin-right: 10px;
    }
    /deep/.el-input {
        width: 150px;
    }
}
.ABtn {
    text-align: center;
}
.search_input {
    display: flex;
    align-items: center;
    height: 50px;
}
.page {
    background: #ffffff;
    text-align: right;
    border-radius: 0 0 4px 4px;
    padding: 5px 20px;
}
.elFormWeb {
    /deep/ .el-textarea__inner {
        height: 50px !important;
        cursor: not-allowed;
    }
}
.elFormWebtwo {
    /deep/ .el-textarea__inner {
        height: 50px !important
    }
}
.readP{
    padding: 20px;
    background: #fff;
    font-size: 16px;
    font-weight: 520;
    line-height: 28px;
}
.showDetail{
    padding: 0px !important;
    /deep/.el-form-item {
        margin-bottom: 0px;
    }
}
</style>
